<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  name: 'LineMonthVue',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart3'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    dateData: {
      type: String,
      default: ''
    },
    monthNum: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    monthNum: {
      handler(newValue, oldValue) {
        this.initChart()
      },
      deep: true
    }
  },
  mounted() {
    if (typeof this.monthNum !== 'undefined' && this.monthNum != null && this.monthNum.length > 0) {
      this.initChart()
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getTime() {
      var date = new Date()
      var y = date.getFullYear()
      var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return y + '/' + m + '/' + d
    },
    findItem(curArr, oldArr) {
      return curArr.concat(oldArr).filter(function(v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v)
      })
    },
    initChart() {
      const num = []
      const date = []
      const date1 = []
      let sum = 0
      const today = this.getTime().split('/')[2]
      const todayYear = this.getTime().split('/')[0]
      const todayMonth = this.getTime().split('/')[1]
      this.monthNum.forEach((item) => {
        sum += item.num
        num.push(item.num)
        const d = item.statDate.split('/')
        date1.push(d[2])
      })
      if (this.dateData.split('/')[1] === todayMonth) {
        for (var i = 1; i < today; i++) {
          i = i < 10 ? '0' + i : i
          date.push(i.toString())
        }
        const dPlus = this.findItem(date, date1)
        for (var ii = 0; ii < dPlus.length; ii++) {
          this.monthNum.push({ num: 0, score: '', statDate: todayYear + '/' + todayMonth + '/' + dPlus[ii] })
        }
        for (var it = 0; it < this.monthNum.length - 1; it++) {
          for (var j = 0; j < this.monthNum.length - 1 - it; j++) {
            if (
              new Date(this.monthNum[j].statDate).getTime() >
              new Date(this.monthNum[j + 1].statDate).getTime()
            ) {
              var temp = this.monthNum[j]
              this.monthNum[j] = this.monthNum[j + 1]
              this.monthNum[j + 1] = temp
            }
          }
        }
      } else {
        const month = this.dateData.split('/')[1]
        const year = this.dateData.split('/')[0]
        if (month === '01' || month === '03' || month === '05' || month === '07' || month === '08' || month === '10' || month === '12') {
          for (var i1 = 1; i1 <= 31; i1++) {
            i1 = i1 < 10 ? '0' + i1 : i1
            date.push(i1.toString())
          }
        } else if (month === '02') {
          if (year % 100 !== 0 && year % 4 === 0 || year % 400 === 0) {
            for (var ii1 = 1; ii1 <= 29; ii1++) {
              ii1 = ii1 < 10 ? '0' + ii1 : ii1
              date.push(ii1.toString())
            }
          } else {
            for (var iiii = 1; iiii <= 28; iiii++) {
              iiii = iiii < 10 ? '0' + iiii : iiii
              date.push(iiii.toString())
            }
          }
        } else {
          for (var iii = 1; iii <= 30; iii++) {
            iii = iii < 10 ? '0' + iii : iii
            date.push(iii.toString())
          }
        }
        const dPlus = this.findItem(date, date1)
        for (var item = 0; item < dPlus.length; item++) {
          this.monthNum.push({ num: 0, score: '', statDate: year + '/' + month + '/' + dPlus[item] })
        }
        for (var it1 = 0; it1 < this.monthNum.length - 1; it1++) {
          for (var j1 = 0; j1 < this.monthNum.length - 1 - it1; j1++) {
            if (
              new Date(this.monthNum[j1].statDate).getTime() >
              new Date(this.monthNum[j1 + 1].statDate).getTime()
            ) {
              var temp1 = this.monthNum[j1]
              this.monthNum[j1] = this.monthNum[j1 + 1]
              this.monthNum[j1 + 1] = temp1
            }
          }
        }
        console.log('monthNum:')
        console.log(this.monthNum)
      }
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        title: [{
          left: 'center',
          top: '-3px',
          text: this.dateData + '月征信报告数量'
        },
        {
          text: '征信报告累计：' + sum + '份',
          right: '80',
          textStyle: {
            color: '#4682b4',
            fontSize: 15
          }
        }],
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: 'none'
        //     },
        //     dataView: { readOnly: false },
        //     magicType: { type: ['line', 'bar'] },
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        tooltip: {
          show: true,
          trigger: 'axis',
          formatter: function(p) {
            var result = '<div>' + '<span style="display:inline-block;margin-right:5px;margin-bottom:0;border-radius:10px;width:9px;height:9px;background-color: ' + p[0].color + ';"></span>' + '征信报告数量' + '</div>' + '日期：'
            result += p[0].name + '<br>' + '数量：' + p[0].value
            return result
          }
        },
        xAxis: {
          type: 'category',
          // name: '单位：号',
          nameTextStyle: {
            color: '#4682b4',
            fontSize: 15
          },
          axisTick: {
            alignWithLabel: true
          },
          data: date
        },
        yAxis: {
          type: 'value',
          name: '数量（份）',
          nameTextStyle: {
            color: '#4682b4',
            fontSize: 15,
            padding: 15
          }
          // axisLabel: {
          //   formatter: '{value} 份'
          // }
        },
        series: [{
          name: '征信报告数量',
          data: num,
          type: 'line',
          color: '#4682b4',
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ],
            label: {
              normal: {
                show: true,
                position: 'end',
                padding: [-13, -20, 15, -45],
                formatter: '{c} ({b})'
              }
            }
          }
        }],
        grid: {
          left: '5%',
          right: '7%',
          bottom: '0%',
          top: '18%',
          containLabel: true
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
